<template>
  <div class="detailitem">
    <div @click="pathPush(detailitem.id)">
      <div class="imgparent">
        <img style="width: 100%;height: 100%" :src="detailitem.img" alt="">
        <div class="imgparent_span">
          <p class="video">播:999万</p><p class="comment">评:{{detailitem.commentlen}}万</p>
        </div>
      </div>
      <p>{{detailitem.name}}</p>
    </div>
  </div>
</template>

<script>
    export default {
      props:['detailitem'],
        name: "Detail",
        data() {
            return {}
        },
        methods: {
        pathPush(data){
          if (this.$route.path != `/article/${data}`) {
            this.$router.push(`/article/${data}`)
          }
        }
        }
    }
</script>

<style scoped lang="less">
.detailitem{
  display: flex;
  flex-wrap: wrap;
  p{
    flex: 1;
    font-size: 3vw;
    display: flex;
    justify-content: center;
    color: #606060;
    padding: 1vw;
  }
  .imgparent{
    position: relative;
    .imgparent_span{
      opacity: 0.5;
      font-size: 3.5vw;
      color: white;
      .video{
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #000000;
        padding: 0.5vw 2vw;
        width: 49%;
      }
      .comment{
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #000000;
        padding: 0.5vw 2vw;
        width: 49%;
      }
    }
  }
}

</style>
